﻿<!doctype html>
<html lang="en">
	<head>
		<title>three.js webgl - trackball camera</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
		    body {
			color: #000;
			font-family:Monospace;
			font-size:13px;
			text-align:center;
			font-weight: bold;

			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		    }

		    #info {
					color:#000;
			position: absolute;
			top: 0px; width: 100%;
			padding: 5px;

		    }

		    a { color: red; }

		</style>
	</head>

	<body>
		<div id="container"></div>
		<div id="info">
			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - trackball camera example</br>
			MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
		</div>

		<script src="js/mylibs/Three.js"></script>

		<!--<script src="js/Detector.js"></script>-->
		<script src="myjs/RequestAnimationFrame.js"></script>
		<script src="myjs/Stats.js"></script>

		<script>

//		    if (!Detector.webgl) Detector.addGetWebGLMessage();

		    var container, stats;

		    var camera, controls, scene, renderer;

		    var cross;

		    init();
		    animate();
		    //render();

		    function init() {

		        // scene and camera

		        scene = new THREE.Scene();
		        scene.fog = new THREE.FogExp2(0xffffff, 0.002);

		        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
		        camera.position.z = 500;

		        controls = new THREE.TrackballControls(camera);

		        controls.rotateSpeed = 1.0;
		        controls.zoomSpeed = 1.2;
		        controls.panSpeed = 0.8;

		        controls.noZoom = false;
		        controls.noPan = false;

		        controls.staticMoving = true;
		        controls.dynamicDampingFactor = 0.3;

		        controls.keys = [65, 83, 68];

		        // world

		        var cube = new THREE.CubeGeometry(20, 60, 20);

		        cube.vertices[0].position.multiplyScalar(0.01);
		        cube.vertices[1].position.multiplyScalar(0.01);
		        cube.vertices[4].position.multiplyScalar(0.01);
		        cube.vertices[5].position.multiplyScalar(0.01);

		        var material = new THREE.MeshLambertMaterial({ color: 0xffffff });

		        for (var i = 0; i < 10; i++) {

		            var mesh = new THREE.Mesh(cube, material);
		            mesh.position.set((Math.random() - 0.5) * 1000,
									  (Math.random() - 0.5) * 1000,
									  (Math.random() - 0.5) * 1000);

		            mesh.updateMatrix();
		            mesh.matrixAutoUpdate = false;
		            scene.add(mesh);

		        }


		        // lights

		        light = new THREE.DirectionalLight(0xffffff);
		        light.position.set(1, 1, 1);
		        scene.add(light);

		        light = new THREE.DirectionalLight(0x002288);
		        light.position.set(-1, -1, -1);
		        scene.add(light);

		        light = new THREE.AmbientLight(0x222222);
		        scene.add(light);


		        // renderer

		        renderer = new THREE.WebGLRenderer({ antialias: false });
		        renderer.setClearColorHex(0xffffff, 1);
		        renderer.setSize(window.innerWidth, window.innerHeight);

		        container = document.getElementById('container');
		        container.appendChild(renderer.domElement);

		        stats = new Stats();
		        stats.domElement.style.position = 'absolute';
		        stats.domElement.style.top = '0px';
		        stats.domElement.style.zIndex = 100;
		        container.appendChild(stats.domElement);


		    }


		    function animate() {

		        requestAnimationFrame(animate);

		        render();
		        stats.update();

		    }

		    function render() {

		        controls.update();
		        renderer.render(scene, camera);

		    }


		</script>

	</body>
</html>